<template>
    <div>
        <el-row class="rows">
            <el-col>
                <span>标题</span>
                <el-input style="width: 600px" clearable v-model="title" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>简介</span>
                <el-input style="width: 600px" clearable v-model="jianjie" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>价格</span>
                <el-input style="width: 600px" clearable v-model="price" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>原价</span>
                <el-input style="width: 600px" clearable v-model="oldprice" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :span="3" class="cols" style="margin-left: 16px;">
                <span>封面</span>
            </el-col>
            <el-col :span="3" style="margin-top: -5px;">
                <el-upload action="http://localhost:8080/file/upload" list-type="picture" ref="upload" :limit="1" :auto-upload="true" :on-exceed="handle" :on-success="getfile">
                    <template #trigger>
                        <el-button type="primary">上传图片</el-button>
                    </template>
                    <template #file="{ file }">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    </template>
                </el-upload>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :span="3" class="cols" style="margin-left: 16px;">
                <span>视频</span>
            </el-col>
            <el-col :span="3" style="margin-top: -5px;">
                <el-upload action="http://localhost:8080/file/upload" list-type="picture" ref="upload2" :limit="1" :auto-upload="true" :on-exceed="handle2" :on-success="getfile2">
                    <template #trigger>
                        <el-button type="primary">上传视频</el-button>
                    </template>
                    <template #file="{ file }">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    </template>
                </el-upload>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>有效期</span>
                <el-input style="width: 600px" clearable v-model="time" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>学习人数</span>
                <el-input style="width: 600px" clearable v-model="xuexi" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>收藏人数</span>
                <el-input style="width: 600px" clearable v-model="shoucang" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :span="3" class="cols">
                <span>所属咨询师</span>
            </el-col>
            <el-col :span="20">
                <el-select v-model="zixunshi" placeholder="请选择课程所属的咨询师" style="width: 600px">
                    <el-option v-for="item in list" :key="item.tid" :label="item.tname" :value="item.tname" />
                </el-select>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :span="3" class="cols">
                <span>是否上架</span>
            </el-col>
            <el-col :span="3" style="margin-top: -5px;">
                <el-switch v-model="judge" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" :offset="18">
                <el-button @click="quxiao">
                    取消
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { genFileId } from "element-plus";
    import { ref, defineEmits, onMounted } from "vue";
    import axios from "axios";

    let title = ref();
    let jianjie = ref();
    let price = ref();
    let oldprice = ref();
    let time = ref();
    let xuexi = ref();
    let shoucang = ref();
    let zixunshi = ref();
    let judge = ref(true);

    const upload = ref();
    const handle = function (files) {
        upload.value.clearFiles();
        const file = files[0];
        file.uid = genFileId();
        upload.value.handleStart(file);
        upload.value.submit();
    };

    let photo = ref("");
    const getfile = function (response) {
        photo.value = "/static/" + response;
    };

    const upload2 = ref();
    const handle2 = function (files) {
        upload2.value.clearFiles();
        const file = files[0];
        file.uid = genFileId();
        upload2.value.handleStart(file);
        upload2.value.submit();
    };

    let shipin = ref("");
    const getfile2 = function (response) {
        shipin.value = "/static/" + response;
    };

    const emites = defineEmits(["tuichu"]);

    const quxiao = function () {
        emites("tuichu");
    };

    const save = function () {
        let index = list.value.findIndex((item) => item.tname == zixunshi.value);
        let tid = list.value[index].tid;
        emites("tuichu", {
            kTitle: title.value,
            kJianjie: jianjie.value,
            kPrice: price.value,
            kOldprice: oldprice.value,
            kTime: time.value,
            kXuexi: xuexi.value,
            KShoucang: shoucang.value,
            kDel: judge.value ? 1 : 0,
            kHot: 0,
            kTupian: photo.value,
            kShipin: shipin.value,
            kTid: tid
        });
    };

    let list = ref([]);
    onMounted(async function () {
        let res = await axios.get(`/teacher/show?name=&del=`);
        list.value = res.data.data;
    });
</script>

<style lang="less" scoped>
    .rows {
        margin: 30px 0;
        span {
            font-weight: bold;
            position: relative;
            left: -10px;
            top: 0;
        }
    }

    .weizhi {
        display: flex;
        justify-content: start;
        align-items: center;
        position: relative;
        left: 7px;
    }
</style>